<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .li1 {
            display: inline-block;
            width: 500px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="myApp">
        <p>{{msg}}</p>
        <input type="text" v-model="msg">
        <hr>
        <p>加法</p>
        <input type="text" v-model="num1">+
        <input type="text" v-model="num2">=
        <span>{{Number(num1)+Number(num2)}}</span>
        <p>减法</p>
        <input type="text" v-model="num3">-
        <input type="text" v-model="num4">=
        <span>{{Number(num3)-Number(num4)}}</span>
        <p>乘法</p>
        <input type="text" v-model="num5">*
        <input type="text" v-model="num6">=
        <span>{{Number(num5)*Number(num6)}}</span>
        <p>除法</p>
        <input type="text" v-model="num7">/
        <input type="text" v-model="num8">=
        <span>{{Number(num7)/Number(num8)}}</span>
    </div>
    <script id="template" type="x-template">
       <div>
            <ul>
                <li class="li1">
                    <p>乘法</p>
                    <input type="text" v-model="num5">*
                    <input type="text" v-model="num6">=
                    <span>{{Number(num5)*Number(num6)}}</span>
                </li>
                <li class="li2">
                    <p>除法</p>
                    <input type="text" v-model="num7">/
                    <input type="text" v-model="num8">=
                    <span>{{Number(num7)/Number(num8)}}</span>
                </li>
            </ul>
            <!-- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
            //报的错误，只能有一个跟元素,可以在最后加一个div 包括所有的代码
            Error compiling template: text "777" outside root element will be ignored.
            //同时不能低于一个底层元素，也就是说至少有一个
            Unknown custom element: <selec> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
            //你是否正确的注册了selec的组件，不能正确的查找的selec这个标签
            -->
            
        </div>
    </script>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            //el:element
            el: '#myApp',
            data: {
                msg: 'hello, vue',
                num1: 2,
                num2: 555,
                num3: 0,
                num4: 0,
                num5: 2,
                num6: 5,
                num7: 2,
                num8: 1
            },
            template: `#template`
        })

    </script>
</body>

</html>